<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>恐鬼症鬼魂特征查询工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
            color: #e6e6e6;
            padding: 20px;
            min-height: 100vh;
            background-attachment: fixed;
            position: relative;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
        }
        
        header {
            text-align: center;
            padding: 30px 0 20px;
            margin-bottom: 20px;
            position: relative;
        }
        
        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 80px;
            height: 80px;
            background: rgba(247, 37, 133, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #f72585;
            box-shadow: 0 0 15px rgba(247, 37, 133, 0.5);
        }
        
        .logo i {
            font-size: 40px;
            color: #f72585;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            color: #f72585;
            text-shadow: 0 0 15px rgba(247, 37, 133, 0.7);
            letter-spacing: 1px;
            position: relative;
            display: inline-block;
        }
        
        h1::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 4px;
            background: linear-gradient(90deg, transparent, #4cc9f0, transparent);
            border-radius: 2px;
        }
        
        .subtitle {
            font-size: 1.3rem;
            color: #4cc9f0;
            margin-top: 25px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }
        
        .filters {
            background: rgba(15, 15, 35, 0.85);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(76, 201, 240, 0.3);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }
        
        .filters::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(76, 201, 240, 0.1) 0%, transparent 70%);
            z-index: -1;
        }
        
        .evidence-grid {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 20px;
			padding-left: 28px;
			padding-right: 28px;
			padding-bottom: 19px;
        }
        
        .evidence-row {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .evidence-item {
            background: rgba(76, 201, 240, 0.15);
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
            width: 150px;
        }
        
        .evidence-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(76, 201, 240, 0.3);
        }
        
        .evidence-item.selected {
            background: rgba(67, 160, 71, 0.3);
            border-color: #43a047;
        }
        
        .evidence-item.excluded {
            background: rgba(211, 47, 47, 0.3);
            border-color: #d32f2f;
            text-decoration: line-through;
            opacity: 0.7;
        }
        
        .evidence-icon {
            font-size: 2rem;
            margin-bottom: 10px;
            color: #4cc9f0;
        }
        
        .evidence-item.selected .evidence-icon {
            color: #43a047;
        }
        
        .evidence-item.excluded .evidence-icon {
            color: #d32f2f;
        }
        
        .evidence-name {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .evidence-selector {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            color: #43a047;
            font-weight: bold;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .evidence-excluder {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center; 
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            color: #d32f2f;
            font-weight: bold;
            opacity: 0;
            transition: opacity 0.3s ease;
}
        
            .evidence-excluder span {
            display: inline-block;
            transform: translateY(-1px);
            }
		
        .evidence-item:hover .evidence-selector,
        .evidence-item:hover .evidence-excluder {
            opacity: 1;
        }
        
        .selected .evidence-selector {
            background: #43a047;
            color: white;
            opacity: 1;
        }
        
        .excluded .evidence-excluder {
            background: #d32f2f;
            color: white;
            opacity: 1;
        }
        
        .clear-button {
            background: rgba(247, 37, 133, 0.3);
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid rgba(247, 37, 133, 0.5);
            width: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .clear-button:hover {
            background: rgba(247, 37, 133, 0.5);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(247, 37, 133, 0.5);
        }
        
        .clear-icon {
            font-size: 2rem;
            margin-bottom: 10px;
            color: #f72585;
        }
        
        .clear-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: #f72585;
        }
        
        .ghost-count {
            text-align: center;
            font-size: 1.3rem;
            margin: 20px 0;
            color: #f72585;
            font-weight: 600;
            background: rgba(20, 20, 40, 0.7);
            padding: 12px;
            border-radius: 8px;
            border: 1px solid rgba(76, 201, 240, 0.2);
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .results {
            background: rgba(15, 15, 35, 0.85);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(76, 201, 240, 0.3);
            backdrop-filter: blur(10px);
            margin-bottom: 40px;
            position: relative;
            overflow: hidden;
        }
        
        .results::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(247, 37, 133, 0.1) 0%, transparent 70%);
            z-index: -1;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        
        th {
            background: rgba(67, 97, 238, 0.25);
            padding: 18px;
            text-align: center;
            border-bottom: 2px solid #4361ee;
            font-size: 1.2rem;
            position: sticky;
            top: 0;
            vertical-align: middle;
        }
        
        th:nth-child(1) { width: 10%; }
        th:nth-child(2) { width: 10%; } 
        th:nth-child(3) { width: 25%; } 
        th:nth-child(4) { width: 55%; } 
        
        td {
            padding: 18px;
            border-bottom: 1px solid rgba(76, 201, 240, 0.15);
            vertical-align: middle;
            text-align: center;
            transition: all 0.4s ease;
        }
        
        tr:nth-child(even) {
            background: rgba(26, 26, 46, 0.3);
        }
        
        tr:hover {
            background: rgba(76, 201, 240, 0.1);
        }
        
        .ghost-name {
            font-weight: bold;
            color: #4cc9f0;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }
        
        .ghost-name i {
            margin-right: 10px;
            color: #f72585;
        }
        
        .ghost-type {
            display: inline-block;
            padding: 7px 15px;
            border-radius: 20px;
            font-size: 0.95rem;
            font-weight: 600;
            white-space: nowrap;
            padding-top: 5px;
        }
        
        .normal-speed {
            background: rgba(67, 97, 238, 0.3);
            color: #9bb1ff;
        }
        
        .variable-speed {
            background: rgba(247, 37, 133, 0.3);
            color: #ff7eb9;
        }
        
        .evidence {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center; 
            gap: 10px;
            margin-top: 5px;
        }
        
        .evidence-tag {
            background: rgba(76, 201, 240, 0.2);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 1rem;
            border: 1px solid rgba(76, 201, 240, 0.3);
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 36px; 
        }
        
        .features {
            padding-left: 25px;
            text-align: left;
            transition: all 0.4s ease;
        }
        
        .features li {
            margin-bottom: 12px;
            line-height: 1.6;
            position: relative;
            padding-left: 25px;
            list-style-type: none;
            text-align: left;
        }
        
        .features li::before {
            content: "•";
            color: #ffffff; /* 白色标记点 */
            font-size: 1.8rem;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-58%);
            line-height: 1;
        }
        
        .feature-highlight {
            color: #f72585;
            font-weight: bold;
        }
        
        .no-results {
            text-align: center;
            padding: 40px;
            color: #f72585;
            font-size: 1.3rem;
            background: rgba(20, 20, 40, 0.5);
            border-radius: 10px;
            margin: 20px;
        }
        
        .highlight {
            background: rgba(247, 37, 133, 0.3);
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: 600;
        }

        footer {
            text-align: center;
            padding: 20px;
            color: #4cc9f0;
            font-size: 0.9rem;
            border-top: 1px solid rgba(76, 201, 240, 0.2);
            margin-top: 20px;
        }
        
        /* 移动端样式 */
        @media (max-width: 1100px) {
            .container {
                max-width: 1000px;
            }
            
            th:nth-child(1) { width: 18%; }
            th:nth-child(2) { width: 12%; } 
            th:nth-child(3) { width: 25%; }
            th:nth-child(4) { width: 45%; } 
        }
        
        @media (max-width: 900px) {
            h1 {
                font-size: 2.2rem;
            }
            
            .logo {
                position: relative;
                top: 0;
                left: 0;
                margin: 0 auto 20px;
            }
            
            header {
                padding-top: 10px;
            }
            
            .subtitle {
                font-size: 1.1rem;
            }
            
            .evidence-item, .clear-button {
                width: 130px;
                padding: 12px;
            }
        }

        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            
            .filters, .results {
                padding: 20px;
            }
            
            th, td {
                padding: 12px;
            }
            
            .ghost-name {
                font-size: 1.1rem;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .evidence-item, .clear-button {
                width: 110px;
                padding: 10px;
            }
            
            .evidence-icon, .clear-icon {
                font-size: 1.5rem;
            }
            
            .evidence-name, .clear-name {
                font-size: 1rem;
            }
            th:nth-child(1) { width: 25%; }
            th:nth-child(2) { width: 25%; }
            th:nth-child(3) { width: 50%; }
            th:nth-child(4) { display: none; }
            
            td:nth-child(4) {
                display: none;
            }
        }
        
        @media (max-width: 480px) {
            .evidence-row {
                gap: 8px;
            }
            
            .evidence-item, .clear-button {
                width: 100px;
                padding: 8px;
            }
        }
        
        /* 特征弹窗样式 */
        .feature-popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 500px;
            background: rgba(15, 15, 35, 0.95);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
            border: 2px solid rgba(247, 37, 133, 0.5);
            z-index: 1000;
            animation: popupFadeIn 0.4s ease;
            backdrop-filter: blur(10px);
        }
        
        .feature-popup.active {
            display: block;
        }
        
        .popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(76, 201, 240, 0.3);
        }
        
        .popup-title {
            font-size: 1.5rem;
            color: #f72585;
            display: flex;
            align-items: center;
        }
        
        .popup-title i {
            margin-right: 10px;
        }
        
        .close-popup {
            background: #f72585;
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .close-popup:hover {
            transform: rotate(90deg);
            background: #ff4081;
        }
        
        .popup-content {
            max-height: 60vh;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        .popup-content ul {
            padding-left: 20px;
        }
        
        .popup-content li {
            margin-bottom: 12px;
            line-height: 1.6;
            position: relative;
            padding-left: 25px;
            list-style-type: none;
        }
        
        .popup-content li::before {
            content: "•";
            color: #f72585;
            font-size: 1.8rem;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-58%);
            line-height: 1;
        }
        
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 999;
        }
        
        .overlay.active {
            display: block;
        }
        
        /* 动画效果 */
        @keyframes popupFadeIn {
            from { opacity: 0; transform: translate(-50%, -40%); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }
        
          /* 移动端提示 */
        .mobile-hint {
            display: none;
            text-align: center;
            color: #4cc9f0;
            font-size: 1rem;
            margin-top: 10px;
            padding: 8px;
            border-radius: 8px;
        }
		
		@media (max-width: 600px) {
            .mobile-hint {
                display: block;
            }
        
        .instructions {
            text-align: center;
            margin-top: 15px;
            color: #4cc9f0;
            font-size: 0.95rem;
        }
        
        .instructions span {
            display: inline-block;
            margin: 0 5px;
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        .instructions .selected-example {
            background: rgba(67, 160, 71, 0.3);
        }
        
        .instructions .excluded-example {
            background: rgba(211, 47, 47, 0.3);
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-ghost"></i>
            </div>
            <h1>恐鬼症鬼魂特征查询</h1>
            <p class="subtitle">根据收集的证据筛选鬼魂类型</p>
        </header>
        
        <div class="filters">
            <div class="evidence-grid" id="evidenceGrid">
                <!-- 证据项将通过JavaScript动态生成 -->
            </div>				  
	            <div class="instructions">
            </div>
        </div>
        
        <div class="ghost-count" id="ghostCount">找到 24 种鬼魂</div>
        <div class="mobile-hint">提示：点击鬼魂行查看详细特征</div>
        
        <div class="results">
            <table id="ghostTable">
                <thead>
                    <tr>
                        <th>鬼魂</th>
                        <th>种类</th>
                        <th>证据</th>
                        <th>特征</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 数据将通过JavaScript动态生成 -->
                </tbody>
            </table>
        </div>
        
        <footer>
            <p>恐鬼症鬼魂特征查询工具 v3.6 | 数据更新至2025年7月 | 作者：Samui</p>
        </footer>
        
        <!-- 特征弹窗 -->
        <div class="feature-popup" id="featurePopup">
            <div class="popup-header">
                <div class="popup-title">
                    <i class="fas fa-ghost"></i>
                    <span id="popupGhostName">幻影</span> - <span id="popupGhostType">常速鬼</span>
                </div>
                <div class="close-popup">
                    <i class="fas fa-times"></i>
                </div>
            </div>
            <div class="popup-content" id="popupContent">
                <ul class="features">
                    <li>特征内容将在这里显示...</li>
                </ul>
            </div>
        </div>
        
        <!-- 遮罩层 -->
        <div class="overlay" id="overlay"></div>
    </div>

    <script>
        // 鬼魂数据
        const ghosts = [
            {
                name: "幻影",
                type: "常速鬼",
                evidence: ["通灵盒", "紫外线", "点阵"],
                features: [
                    "<span class='feature-highlight'>拍照后鬼魂会消失，但照片依然清晰有效</span>",
                    "猎杀时手电闪烁频率极慢，肉眼几乎无法看见",
                    "鬼魂现身时，若与其对视会大幅降低理智值",
                    "附身技能：会锁定一名玩家并移动到其位置，同时留下EMF反应"
                ]
            },
            {
                name: "御灵",
                type: "常速鬼",
                evidence: ["EMF5", "紫外线", "点阵"],
                features: [
                    "<span class='feature-highlight'>点阵只能通过摄像机看到（鬼房里不能有玩家）</span>",
                    "永远不会更换鬼房",
                    "会通过现身灵异事件的方式暂时离开鬼房，然后迅速返回"
                ]
            },
            {
                name: "亡魂",
                type: "变速鬼",
                evidence: ["灵球", "刺骨寒温", "鬼魂笔记"],
                features: [
                    "猎杀时，<span class='feature-highlight'>一旦看见玩家或侦测到玩家的电子产品/声音，速度会变得极快</span>",
                    "丢失目标后，速度会降至很慢"
                ]
            },
            {
                name: "魅影",
                type: "常速鬼",
                evidence: ["EMF5", "通灵盒", "点阵"],
                features: [
                    "<span class='feature-highlight'>不会踩盐</span>",
                    "可在非猎杀期间挑选一名玩家并瞬间移动到玩家所在处，传送目的地会有EMF反应"
                ]
            },
            {
                name: "暗影",
                type: "常速鬼",
                evidence: ["EMF5", "刺骨寒温", "鬼魂笔记"],
                features: [
                    "<span class='feature-highlight'>猎杀理智阈值为35%（低于常规的50%）</span>",
                    "当有玩家在鬼房内时，鬼魂几乎不会进行互动，也无法发动攻击",
                    "使用召唤阵、八音盒、猴爪召唤鬼魂时暗影有概率以黑影形态现身其它鬼魂为实体"
                ]
            },
            {
                name: "魔洛伊",
                type: "变速鬼",
                evidence: ["通灵盒", "刺骨寒温", "鬼魂笔记"],
                features: [
                    "速度与玩家团队的平均理智值成反比，理智越低，鬼越快",
                    "<span class='feature-highlight'>被通灵盒或收音器回应后，玩家会进入被诅咒状态，理智值下降速度加倍</span>",
                    "使用圣木可以解除诅咒，圣木有12秒的保护期"
                ]
            },
            {
                name: "孪魂",
                type: "常速鬼",
                evidence: ["EMF5", "刺骨寒温", "通灵盒"],
                features: [
                    "能几乎同时在<span class='feature-highlight'>两个地方(全图)</span>进行互动，会听到前后<span class='feature-highlight'>间隔1秒的两次互动声音</span>",
                    "拥有快慢两种猎杀速度：从鬼房发起的攻击速度较慢，从别处发起的攻击速度较快"
                ]
            },
            {
                name: "巨灵",
                type: "变速鬼",
                evidence: ["EMF5", "刺骨寒温", "紫外线"],
                features: [
                    "<span class='feature-highlight'>永远不会关闭总电源</span>",
                    "猎杀时，若玩家在远处，鬼会加速追击，靠近后恢复正常速度",
                    "特殊技能：瞬间降低附近一名玩家25%的理智值，并在原地留下EMF反应"
                ]
            },
            {
                name: "刹耶",
                type: "变速鬼",
                evidence: ["灵球", "鬼魂笔记", "点阵"],
                features: [
                    "<span class='feature-highlight'>猎杀阈值最高75%团队理智，会随着衰老变低</span>",
                    "随着游戏进行和玩家的出现，鬼魂会'衰老'，导致其活动更少，攻击性更低",
                    "衰老后，其猎杀时的移动速度会变慢，猎杀理智阈值也会降低"
                ]
            },
            {
                name: "幻妖",
                type: "常速鬼",
                evidence: ["EMF5", "灵球", "紫外线"],
                features: [
                    "<span class='feature-highlight'>指纹有概率留下六指指纹</span>",
                    "拥有擦除指纹的技能动门窗时有概率不留下指纹",
                    "猎杀时会变幻形态"
                ]
            },
            {
                name: "寒魔",
                type: "变速鬼",
                evidence: ["灵球", "刺骨寒温", "紫外线"],
                features: [
                    "在低温区域移动速度更快",
                    "猎杀时，在低温区可以看到其呼出的寒气",
                    "从不开启总电源，<span class='feature-highlight'>但会频繁关闭总电源</span>"
                ]
            },
            {
                name: "梦魇",
                type: "变速鬼",
                evidence: ["灵球", "通灵盒", "鬼魂笔记"],
                features: [
                    "<span class='feature-highlight'>更倾向于在黑暗中攻击，关灯时的猎杀理智阈值（60%）远高于开灯时（40%）</span>",
                    "永远不会打开电灯，但可能会关灯或弄坏灯",
                    "玩家开灯后会马上关灯（秒关灯）"
                ]
            },
            {
                name: "怨灵",
                type: "常速鬼",
                evidence: ["灵球", "通灵盒", "刺骨寒温"],
                features: [
                    "对火焰（蜡烛、打火机、营火）非常敏感，吹灭火焰可能会立即触发猎杀",
                    "火焰可以作为守护，阻止其发动攻击。<span class='feature-highlight'>但若连续吹灭三支蜡烛，将无视理智直接猎杀</span>",
                    "怨灵无法在点燃蜡烛的3米内开启猎杀"
                ]
            },
            {
                name: "雾影",
                type: "常速鬼",
                evidence: ["通灵盒", "鬼魂笔记", "点阵"],
                features: [
                    "猎杀时可以感知到所有玩家的位置（全图透视）",
                    "拥有速度锁，<span class='feature-highlight'>与玩家之间的距离越近就会越慢</span>",
                    "问通灵盒雾影有概率回复特有的专属音效"
                ]
            },
            {
                name: "妖怪",
                type: "常速鬼",
                evidence: ["灵球", "通灵盒", "点阵"],
                features: [
                    "猎杀时，<span class='feature-highlight'>对玩家声音和电子产品的侦测范围极小（约2米）</span>",
                    "在其附近说话会激怒它，大幅增加互动和猎杀的可能性"
                ]
            },
            {
                name: "雷曾",
                type: "变速鬼",
                evidence: ["EMF5", "灵球", "点阵"],
                features: [
                    "在激活的电子产品附近时，移动速度会大幅提升",
                    "<span class='feature-highlight'>靠近电子产品时，猎杀理智阈值会提高至65%</span>",
                    "在猎杀时对电器影响范围为15米（正常鬼是10米）",
                    "注意：雷魂在附近没有电器时猎杀阈值为50%，初始移动速度为1.7M/S最高2.8M/S"
                ]
            },
            {
                name: "赤鬼",
                type: "常速鬼",
                evidence: ["EMF5", "刺骨寒温", "点阵"],
                features: [
                    "没有烟雾事件（灵异事件的一种）",
                    "<span class='feature-highlight'>在猎杀时闪烁频率比正常鬼快，</span>表现出来的效果是一直处于现身状态<span class='feature-highlight'>很少隐身</span>",
                    "社牛鬼非常活跃"
                ]
            },
            {
                name: "恶魔",
                type: "常速鬼",
                evidence: ["灵球", "刺骨寒温", "鬼魂笔记"],
                features: [
                    "<span class='feature-highlight'>攻击性极强，发动技能时无视理智猎杀，不发动技能时猎杀理智阈值为70%</span>",
                    "猎杀间隔时间更短（20秒）其他鬼为25秒",
                    "十字架对其生效范围更大（5米）其他鬼为3米",
                    "圣木对其影响时间更短（60秒）其他鬼90秒，魂魄180秒"
                ]
            },
            {
                name: "捣蛋鬼",
                type: "常速鬼",
                evidence: ["通灵盒", "紫外线", "鬼魂笔记"],
                features: [
                    "<span class='feature-highlight'>非猎杀期间可以同时对大量物品进行互动，</span>留下EMF2级反应，物品固定EMF3级反应",
                    "猎杀时每0.5秒与周围物体互动一次互动力度为2-6"
                ]
            },
            {
                name: "女妖",
                type: "常速鬼",
                evidence: ["灵球", "紫外线", "点阵"],
                features: [
                    "<span class='feature-highlight'>猎杀时只对一名玩家感兴趣，</span>在该玩家死亡或离开房子前无视其他玩家",
                    "拥有附身特性，会对一名玩家释放技能走到该玩家所在位置",
                    "收音器可以收听到类似尖叫的特殊超自然声音"
                ]
            },
            {
                name: "拟魂",
                type: "常速/变速",
                evidence: ["通灵盒", "刺骨寒温", "紫外线", "灵球"],
                features: [
                    "能够模仿游戏中其他任何一种鬼魂的特征和行为",
                    "<span class='feature-highlight'>证据中必然会出现灵球，即使在0证据模式下也能看到</span>"
                ]
            },
            {
                name: "幽灵",
                type: "常速鬼",
                evidence: ["灵球", "刺骨寒温", "点阵"],
                features: [
                    "在附近点燃圣木可以把幽灵困在鬼房",
                    "快速开关门，可以直接把门全闭",
                    "<span class='feature-highlight'>瞬间对门产生两次互动，俗称双动门</span>",
                    "游荡频率高于其他鬼魂"
                ]
            },
            {
                name: "鬼婴",
                type: "常速鬼",
                evidence: ["EMF5", "紫外线", "鬼魂笔记"],
                features: [
                    "<span class='feature-highlight'>猎杀时脚步很轻，听得到喘气听不到脚步</span>",
                    "用收音器能听到频繁的超自然声音"
                ]
            },
            {
                name: "魂魄",
                type: "常速鬼",
                evidence: ["EMF5", "通灵盒", "鬼魂笔记"],
                features: [
                    "点燃圣木后<span class='feature-highlight'>下一次猎杀延长180秒</span>",
                    "没有其他特征最普通的鬼"
                ]
            }
        ];

        // 证据类型及其图标
        const evidenceTypes = [
            { id: "EMF5", name: "EMF5", icon: "fas fa-wave-square" },
            { id: "通灵盒", name: "通灵盒", icon: "fas fa-microphone-alt" },
            { id: "紫外线", name: "紫外线", icon: "fas fa-fingerprint" }, 
            { id: "灵球", name: "灵球", icon: "fas fa-circle" },
            { id: "刺骨寒温", name: "刺骨寒温", icon: "fas fa-temperature-low" },
            { id: "鬼魂笔记", name: "鬼魂笔记", icon: "fas fa-book" },
            { id: "点阵", name: "点阵", icon: "fas fa-walking" }
        ];

        // 证据状态
        const EvidenceState = {
            NONE: 0,
            SELECTED: 1,
            EXCLUDED: 2
        };

        // DOM元素
        const evidenceGrid = document.getElementById('evidenceGrid');
        const ghostCount = document.getElementById('ghostCount');
        const ghostTableBody = document.querySelector('#ghostTable tbody');
        const featurePopup = document.getElementById('featurePopup');
        const overlay = document.getElementById('overlay');
        const popupGhostName = document.getElementById('popupGhostName');
        const popupGhostType = document.getElementById('popupGhostType');
        const popupContent = document.getElementById('popupContent');
        const closePopup = document.querySelector('.close-popup');
        
        // 存储证据状态
        let evidenceState = {};
        let currentGhosts = ghosts;

        // 初始化证据网格
        function initEvidenceGrid() {
            evidenceGrid.innerHTML = '';
            
            // 创建第一行（4个证据）
            const row1 = document.createElement('div');
            row1.className = 'evidence-row';
            
            // 创建第二行（3个证据 + 清空按钮）
            const row2 = document.createElement('div');
            row2.className = 'evidence-row';
            
            // 添加证据项
            evidenceTypes.forEach((evidence, index) => {
                const item = document.createElement('div');
                item.className = 'evidence-item';
                item.dataset.evidence = evidence.id;
                item.innerHTML = `
                    <div class="evidence-selector">✓</div>
                    <div class="evidence-excluder"><span>✕</span></div>
                    <div class="evidence-icon"><i class="${evidence.icon}"></i></div>
                    <div class="evidence-name">${evidence.name}</div>
                `;
                
                // 添加点击事件监听器
                item.addEventListener('click', function(e) {
                    // 检查点击位置
                    const selector = this.querySelector('.evidence-selector');
                    const excluder = this.querySelector('.evidence-excluder');
                    const rectSelector = selector.getBoundingClientRect();
                    const rectExcluder = excluder.getBoundingClientRect();
                    
                    if (e.clientX < rectSelector.right && e.clientY < rectSelector.bottom) {
                        // 点击了左上角选择区域
                        toggleEvidenceState(evidence.id, EvidenceState.SELECTED);
                    } else if (e.clientX > rectExcluder.left && e.clientY < rectExcluder.bottom) {
                        // 点击了右上角排除区域
                        toggleEvidenceState(evidence.id, EvidenceState.EXCLUDED);
                    } else {
                        // 点击了证据主体区域，默认切换选择状态
                        toggleEvidenceState(evidence.id, EvidenceState.SELECTED);
                    }

                    filterGhosts();
                });
                
                // 添加到对应行
                if (index < 4) {
                    row1.appendChild(item);
                } else {
                    row2.appendChild(item);
                }
                
                evidenceState[evidence.id] = EvidenceState.NONE;
            });
            
            // 添加清空按钮
            const clearButton = document.createElement('div');
            clearButton.className = 'clear-button';
            clearButton.innerHTML = `
                <div class="clear-icon"><i class="fas fa-trash-alt"></i></div>
                <div class="clear-name">清空选项</div>
            `;
            
            clearButton.addEventListener('click', function() {
                clearAllEvidence();
                filterGhosts();
            });
            
            row2.appendChild(clearButton);
            
            evidenceGrid.appendChild(row1);
            evidenceGrid.appendChild(row2);
        }

        // 切换证据状态
        function toggleEvidenceState(evidenceId, newState) {
            const currentState = evidenceState[evidenceId];
            
            // 如果点击的是当前状态，则取消该状态
            if (newState === currentState) {
                evidenceState[evidenceId] = EvidenceState.NONE;
            } else {
                // 否则应用新状态
                evidenceState[evidenceId] = newState;
            }
            
            updateEvidenceItem(evidenceId);
        }

        // 更新证据项样式
        function updateEvidenceItem(evidenceId) {
            const evidenceItem = document.querySelector(`.evidence-item[data-evidence="${evidenceId}"]`);
            if (!evidenceItem) return;
            
            const currentState = evidenceState[evidenceId];
            
            // 清除所有状态类
            evidenceItem.classList.remove('selected', 'excluded');
            
            if (currentState === EvidenceState.SELECTED) {
                evidenceItem.classList.add('selected');
            } else if (currentState === EvidenceState.EXCLUDED) {
                evidenceItem.classList.add('excluded');
            }
        }

        // 清空所有证据状态
        function clearAllEvidence() {
            for (const evidence in evidenceState) {
                evidenceState[evidence] = EvidenceState.NONE;
                updateEvidenceItem(evidence);
            }
        }

        // 筛选鬼魂
        function filterGhosts() {
            // 获取选中的证据和排除的证据
            const selectedEvidence = [];
            const excludedEvidence = [];
            
            for (const evidence in evidenceState) {
                if (evidenceState[evidence] === EvidenceState.SELECTED) {
                    selectedEvidence.push(evidence);
                } else if (evidenceState[evidence] === EvidenceState.EXCLUDED) {
                    excludedEvidence.push(evidence);
                }
            }
            
            // 如果没有任何选择，显示所有鬼魂
            if (selectedEvidence.length === 0 && excludedEvidence.length === 0) {
                currentGhosts = ghosts;
                renderGhosts(ghosts);
                return;
            }
            
            // 筛选鬼魂
            const filteredGhosts = ghosts.filter(ghost => {
                // 必须包含所有选中的证据
                const hasAllSelected = selectedEvidence.every(ev => ghost.evidence.includes(ev));
                
                // 不能包含任何排除的证据
                const hasNoExcluded = !excludedEvidence.some(ev => ghost.evidence.includes(ev));
                
                return hasAllSelected && hasNoExcluded;
            });
            
            currentGhosts = filteredGhosts;
            renderGhosts(filteredGhosts);
        }

        // 初始化表格
        function renderGhosts(ghostsToRender) {
            ghostTableBody.innerHTML = '';
            
            if (ghostsToRender.length === 0) {
                ghostTableBody.innerHTML = '<tr><td colspan="4" class="no-results"><i class="fas fa-ghost"></i> 没有找到匹配的鬼魂！请调整证据选择</td></tr>';
                ghostCount.textContent = '找到 0 种鬼魂';
                return;
            }
            
            ghostsToRender.forEach(ghost => {
                const row = document.createElement('tr');
                row.dataset.ghost = ghost.name;
                
                // 高亮匹配证据
                const evidenceHtml = ghost.evidence.map(ev => {
                    return `<span class="evidence-tag">${ev}</span>`;
                }).join('');
                
                // 特征列表
                const featuresHtml = ghost.features.map(f => `<li>${f}</li>`).join('');
                
                // 鬼魂图标
                const ghostIcon = ghost.type.includes("变速") ? "fas fa-bolt" : "fas fa-walking";
                
                row.innerHTML = `
                    <td><span class="ghost-name"><i class="${ghostIcon}"></i>${ghost.name}</span></td>
                    <td>
                        <span class="ghost-type ${ghost.type.includes('变速') ? 'variable-speed' : 'normal-speed'}">
                            ${ghost.type}
                        </span>
                    </td>
                    <td><div class="evidence">${evidenceHtml}</div></td>
                    <td><ul class="features">${featuresHtml}</ul></td>
                `;
                
                ghostTableBody.appendChild(row);
            });
            
            ghostCount.textContent = `找到 ${ghostsToRender.length} 种鬼魂`;
            bindRowEvents();
        }

        // 为表格行绑定点击事件
        function bindRowEvents() {
            const rows = ghostTableBody.querySelectorAll('tr');
            
            rows.forEach(row => {
                row.addEventListener('click', function(e) {
                    // 仅在移动端处理
                    if (window.innerWidth > 600) return;
                    
                    const ghostName = this.dataset.ghost;
                    const ghost = ghosts.find(g => g.name === ghostName);
                    
                    if (ghost) {
                        showFeaturePopup(ghost);
                    }
                });
            });
        }

        // 显示特征弹窗
        function showFeaturePopup(ghost) {
            popupGhostName.textContent = ghost.name;
            popupGhostType.textContent = ghost.type;
            
            // 设置特征内容
            const featuresHtml = ghost.features.map(f => `<li>${f}</li>`).join('');
            popupContent.querySelector('ul').innerHTML = featuresHtml;
            
            // 设置图标
            const ghostIcon = ghost.type.includes("变速") ? "fas fa-bolt" : "fas fa-walking";
            document.querySelector('.popup-title i').className = ghostIcon;
            
            // 显示弹窗和遮罩
            featurePopup.classList.add('active');
            overlay.classList.add('active');
            
            // 阻止背景滚动
            document.body.style.overflow = 'hidden';
        }

        // 关闭特征弹窗
        function closeFeaturePopup() {
            featurePopup.classList.remove('active');
            overlay.classList.remove('active');
            document.body.style.overflow = '';
        }

        // 事件监听
        closePopup.addEventListener('click', closeFeaturePopup);
        overlay.addEventListener('click', closeFeaturePopup);

        // 窗口大小变化时重新渲染
        window.addEventListener('resize', function() {
            renderGhosts(currentGhosts);
        });

        // 初始渲染
        initEvidenceGrid();
        renderGhosts(ghosts);
    </script>
</body>
</html>
